<script setup>
import { nextTick, ref, toRefs, watch } from "vue";
import { inspectionMap } from "@/api/inspection/resource-manage.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { robotAlignPosition } from "@/api/inspection/robot-list";
import useKonva from "@/composables/useKonva";
import robotIcon from "@/assets/images/common/robot_icon.png";

// konva容器
const container = ref();
const { layer, pointData, drawPoint, handlePointData, initStage, initImage } =
  useKonva();

const mapList = ref([]);
async function getMapList() {
  const { data } = await inspectionMap.read();
  mapList.value = data.list;
}
getMapList();

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  code: {
    type: String,
    default: "",
  },
});
const { visible, code } = toRefs(props);
const emit = defineEmits(["update:visible"]);

const formData = ref({
  code,
  mapId: null,
  x: null,
  y: null,
  theta: 0,
});

function onCloseDialog() {
  emit("update:visible", false);
  formData.value.mapId = null;
}

async function onSubmit() {
  await ElMessageBox.confirm("确认继续操作吗", "警告");
  const { x, y, theta } = handlePointData();
  const { message } = await robotAlignPosition({
    code: code.value,
    mapId: formData.value.mapId,
    x,
    y,
    theta,
    type: "inspection",
  });
  ElMessage({ type: "success", message });
  onCloseDialog();
}

function selectMap(val) {
  layer.value.off("click");
  mapList.value.forEach((element) => {
    if (element.id === val) {
      initImage(element.url);
      layer.value.on("click", clickMap);
    }
  });
}

function clickMap(e) {
  if (e.evt.button !== 0) return;
  pointData.value.length = 0;
  const { x, y } = layer.value.getRelativePointerPosition();
  formData.value.x = Number(x.toFixed(2));
  formData.value.y = Number(y.toFixed(2));
  pointData.value.push({ x: Number(x.toFixed(2)), y: Number(y.toFixed(2)) });
  drawPoint(robotIcon);
}

watch(visible, async (newVal) => {
  if (newVal) {
    await nextTick();
    initStage("mapDialogKonva", 500, 500);
  }
});
</script>

<template>
  <el-dialog
    :model-value="visible"
    title="位置校准"
    width="640px"
    top="5vh"
    @close="onCloseDialog()"
  >
    <el-form :model="formData" label-width="80px">
      <el-form-item label="选择地图">
        <el-select v-model="formData.mapId" @change="selectMap">
          <el-option
            v-for="item in mapList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="font-bold" label="选择坐标">
        <div
          id="mapDialogKonva"
          ref="container"
          class="overflow-auto border rounded border-solid border-[#dcdfe6]"
        ></div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit()">确定</el-button>
        <el-button @click="onCloseDialog()">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
